<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org"
      th:replace="~{common/layout :: html(title='首页', content=~{::content})}">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>扶贫助农电商平台 - 连接城乡，助力脱贫</title>
    
    <!-- Bootstrap CSS -->
    <link th:href="@{/webjars/bootstrap/5.3.0/css/bootstrap.min.css}" rel="stylesheet">
    <!-- Font Awesome -->
    <link th:href="@{/webjars/font-awesome/6.4.0/css/all.min.css}" rel="stylesheet">
    
    <style>
        .hero-section {
            background: linear-gradient(rgba(0, 123, 255, 0.7), rgba(40, 167, 69, 0.7)), 
                        url('/images/hero-bg.jpg') center/cover;
            color: white;
            padding: 100px 0;
            text-align: center;
        }
        .product-card {
            transition: transform 0.3s;
            border: none;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .product-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 20px rgba(0,0,0,0.2);
        }
        .news-card {
            border-left: 4px solid #28a745;
            transition: all 0.3s;
        }
        .news-card:hover {
            background-color: #f8f9fa;
        }
        .section-title {
            text-align: center;
            margin-bottom: 3rem;
            color: #2c3e50;
        }
        .section-title::after {
            content: '';
            width: 50px;
            height: 3px;
            background: #28a745;
            display: block;
            margin: 10px auto;
        }
    </style>
</head>
<body>
<div th:fragment="content">
    <!-- 英雄区域 -->
    <section class="hero-section text-center">
        <div class="container">
            <h1 class="display-4 fw-bold mb-4">扶贫助农，共同富裕</h1>
            <p class="lead mb-4">连接城乡，助力脱贫，让每一份农产品都承载着希望与温暖</p>
            <div class="d-flex justify-content-center gap-3">
                <a href="/product/list" class="btn btn-primary btn-lg">
                    <i class="fas fa-shopping-cart"></i> 购买农产品
                </a>
                <a href="/news/list" class="btn btn-outline-light btn-lg">
                    <i class="fas fa-newspaper"></i> 了解更多
                </a>
            </div>
        </div>
    </section>

    <!-- 扶贫政策新闻区域 -->
    <section class="py-5">
        <div class="container">
            <h2 class="section-title">扶贫政策</h2>
            <div class="row">
                <div th:if="${policyNews.isEmpty()}" class="text-center">
                    <p class="text-muted">暂无最新的扶贫政策新闻。</p>
                </div>
                <div th:each="news : ${policyNews}" class="col-md-4 mb-4">
                    <div class="card news-card h-100">
                        <div class="card-body">
                            <h5 class="card-title" th:text="${news.title}">政策标题</h5>
                            <p class="card-text" th:text="${#strings.abbreviate(news.content, 100)}">政策内容摘要...</p>
                            <div class="d-flex justify-content-between align-items-center">
                                <small class="text-muted" th:text="${#temporals.format(news.createTime, 'yyyy-MM-dd')}">2024-01-01</small>
                                <a th:href="@{/news/detail/{id}(id=${news.id})}" class="btn btn-sm btn-success">阅读更多</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 推荐农产品区域 -->
    <section class="py-5 bg-light">
        <div class="container">
            <h2 class="section-title">特色农产品</h2>
            <div th:if="${recommendProducts.isEmpty()}" class="text-center">
                <p class="text-muted">暂无推荐的特色农产品。</p>
            </div>
            <div class="row">
                <div th:each="product : ${recommendProducts}" class="col-lg-3 col-md-4 col-sm-6 mb-4">
                    <div class="card product-card h-100 shadow-sm">
                        <a th:href="@{/product/detail/{id}(id=${product.id})}">
                            <img th:src="${product.imageUrl}" th:alt="${product.name}" class="card-img-top" style="height: 200px; object-fit: cover;">
                        </a>
                        <div class="card-body d-flex flex-column">
                            <h5 class="card-title" th:text="${product.name}">产品名称</h5>
                            <p class="card-text small text-muted mb-2">
                                <i class="fas fa-map-marker-alt"></i> <span th:text="${product.origin}">产地</span>
                            </p>
                            <p class="card-text flex-grow-1" th:text="${#strings.abbreviate(product.description, 60)}">产品描述...</p>
                            <div class="mt-auto">
                                <div class="d-flex justify-content-between align-items-center">
                                    <span class="h5 text-success mb-0">¥<span th:text="${product.price}">0.00</span></span>
                                    <a th:href="@{/product/detail/{id}(id=${product.id})}" class="btn btn-success btn-sm">查看详情</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="text-center mt-4">
                <a href="/product/list" class="btn btn-outline-success btn-lg">查看所有农产品</a>
            </div>
        </div>
    </section>

    <!-- 农产品文化故事区域 -->
    <section class="py-5">
        <div class="container">
            <h2 class="section-title">农产品文化故事</h2>
            <div th:if="${cultureNews.isEmpty()}" class="text-center">
                <p class="text-muted">暂无农产品文化故事。</p>
            </div>
            <div class="row">
                <div th:each="news : ${cultureNews}" class="col-md-6 mb-4">
                    <div class="card news-card h-100">
                        <div class="row g-0">
                            <div class="col-md-4" th:if="${news.imageUrl != null and !news.imageUrl.isEmpty()}">
                                <img th:src="${news.imageUrl}" th:alt="${news.title}" class="img-fluid rounded-start h-100" style="object-fit: cover;">
                            </div>
                            <div class="col-md-8">
                                <div class="card-body">
                                    <h5 class="card-title" th:text="${news.title}">文化故事标题</h5>
                                    <p class="card-text" th:text="${#strings.abbreviate(news.content, 80)}">故事内容摘要...</p>
                                    <p class="card-text mt-auto">
                                        <small class="text-muted" th:text="${#temporals.format(news.createTime, 'yyyy-MM-dd')}">2024-01-01</small>
                                        <a th:href="@{/news/detail/{id}(id=${news.id})}" class="btn btn-sm btn-success ms-2 float-end">阅读全文</a>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 助农活动新闻区域 -->
    <section class="py-5 bg-light">
        <div class="container">
            <h2 class="section-title">助农活动新闻</h2>
             <div th:if="${activityNews.isEmpty()}" class="text-center">
                <p class="text-muted">近期暂无助农活动新闻。</p>
            </div>
            <div class="row">
                <div th:each="news : ${activityNews}" class="col-md-4 mb-4">
                    <div class="card news-card h-100">
                        <img th:if="${news.imageUrl != null and !news.imageUrl.isEmpty()}" th:src="${news.imageUrl}" th:alt="${news.title}" class="card-img-top" style="height: 200px; object-fit: cover;">
                        <div class="card-body">
                            <h5 class="card-title" th:text="${news.title}">活动标题</h5>
                            <p class="card-text" th:text="${#strings.abbreviate(news.content, 100)}">活动内容摘要...</p>
                            <div class="d-flex justify-content-between align-items-center">
                                <small class="text-muted">
                                    <i class="fas fa-eye"></i> <span th:text="${news.viewCount}">0</span> 次浏览
                                </small>
                                <a th:href="@{/news/detail/{id}(id=${news.id})}" class="btn btn-sm btn-success">了解详情</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

    <!-- jQuery -->
    <script th:src="@{/webjars/jquery/3.7.0/jquery.min.js}"></script>
    <!-- Bootstrap JS -->
    <script th:src="@{/webjars/bootstrap/5.3.0/js/bootstrap.bundle.min.js}"></script>
</body>
</html> 